<template>
  <view>
    <Header type="back" />
    <view class="w-100" :class="'h' + bar_height"></view>
    <view class="w-100 h80">
      <view class="w-100 f-b-c h80">
        <view
          class="w-50 re h80 f-c-c ty-nav-li"
          @click="nav_change(item)"
          v-for="(item, index) in serve"
          :key="item.code"
          :class="item.code == nav_code ? 'bg-f8ff' : ''"
        >
          <!-- 左边边角显示 选中并且不能是第一个  -->
          <HornMargin
            type="left-bottom"
            :width="44"
            :height="40"
            v-if="item.code == nav_code && index != 0"
          />
          <view class="t-b font32 font600">{{ item.title }}</view>
          <!-- 右边边角显示  选中并且不能是最后一个 -->
          <HornMargin
            type="right-bottom"
            :width="44"
            :height="40"
            v-if="item.code == nav_code && index != serve.length - 1"
          />
        </view>
      </view>
    </view>
    <view
      class="w-100 h1356 bg-f8ff ty-use re"
      :style="'height:' + height + 'rpx'"
      v-show="nav_code === 3"
    >
      <scroll-view class="scroll-view_H uni-scroll" scroll-y="true">
        <view class="w-100 py-6 px-4 f-b-c">
          <input
            class="bg-e4 uni-input circle60 h80 font28 px-4 w360"
            v-model="coupon.password"
            placeholder="请输入优惠券兑换码"
          />
          <view
            class="px-4 h80 circle40 f-c-c bg-theme font28"
            @click="redemption"
            >确认兑换</view
          >
        </view>
        <ItemList
          :coupon_list="use_list_redem"
          key="use_list_redem"
          @get_item_click="get_redemption_click"
        ></ItemList>
        <view class="w-100 h180"></view>
        <view
          class="w-100 t-a font24 t-3 pt-12 pb-1"
          v-if="use_list_redem.length == 0"
          >暂无数据</view
        >
      </scroll-view>
    </view>
    <view
      class="w-100 h1356 bg-f8ff ty-used re"
      :style="'height:' + height + 'rpx'"
      v-show="nav_code === 1"
    >
      <scroll-view class="scroll-view_H uni-scroll" scroll-y="true">
        <ItemList :coupon_list="use_list" key="use_list"></ItemList>
        <view class="w-100 h180"></view>
        <view
          class="w-100 t-a font24 t-3 pt-12 pb-1"
          v-if="use_list.length == 0"
          >暂无数据</view
        >
      </scroll-view>
    </view>
    <view
      class="w-100 h1356 bg-f8ff ty-used re"
      :style="'height:' + height + 'rpx'"
      v-show="nav_code === 2"
    >
      <scroll-view class="scroll-view_H uni-scroll" scroll-y="true">
        <ItemList :coupon_list="used_list" key="used_list"></ItemList>
        <view class="w-100 h180"></view>
        <view
          class="w-100 t-a font24 t-3 pt-12 pb-1"
          v-if="used_list.length == 0"
          >暂无数据</view
        >
      </scroll-view>
    </view>
    <view
      class="w-100 h1356 bg-f8ff ty-invalid re"
      :style="'height:' + height + 'rpx'"
      v-show="nav_code === 0"
    >
      <scroll-view class="scroll-view_H uni-scroll" scroll-y="true">
        <ItemList :coupon_list="invalid_list" key="invalid_list"></ItemList>
        <view class="w-100 h180"></view>
        <view
          class="w-100 t-a font24 t-3 pt-12 pb-1"
          v-if="invalid_list.length == 0"
          >暂无数据</view
        >
      </scroll-view>
    </view>
  </view>
</template>

<script>
import Header from "../../../components/header.vue";
import HornMargin from "../../../components/horn_margin.vue";
import ItemList from "./item-list.vue";

import {
  my_coupon,
  receiveByPassword,
  availableList,
  get_coupont_id,
  get_by_password,
} from "../../../api/coupon.js";

export default {
  components: {
    Header,
    HornMargin,
    ItemList,
  },
  data() {
    return {
      height: 0,
      bar_height: 0,
      serve: [
        //状态 1：待使用/2：已使用/0：过期
        { title: "待领取", code: 3 },
        { title: "未使用", code: 1 },
        { title: "已使用", code: 2 },
        { title: "已失效", code: 0 },
      ],
      query: {
        currentPage: 1,
        pageSize: 80,
        status: 1,
      },
      nav_code: 3,
      invalid_list: [],
      use_list: [],
      used_list: [],
      use_list_redem: [],
      coupon: {},
      userInfo: {},
    };
  },
  created() {
    // this.get_coupon()
    this.get_available_list();
    this.bar_height = uni.getStorageSync("toprpx"); //顶部高度
    this.height = uni.getStorageSync("map_height"); //其他页面使用的高度
    this.userInfo = uni.getStorageSync("userInfo");
  },
  methods: {
    nav_change(e) {
      this.use_list = [];
      this.nav_code = e.code;
      this.query.status = e.code;
      if (e.code == 3) {
        return this.get_available_list();
      }
      this.get_coupon();
    },
    get_redemption_click(couponId) {
      get_coupont_id({ couponId }).then((res) => {
        if (res.code == 0) {
          uni.showToast({
            title: "领取成功",
            icon: "none",
            duration: 1500,
          });
          this.coupon.password = "";
          setTimeout(() => {
            this.get_available_list();
          }, 1500);
        }
      });
    },
    get_available_list() {
      let data = {
        chargeType: "FREE",
        expired: "false",
        orgId: this.userInfo?.orgId,
      };
      availableList(data).then((res) => {
        const {
          code,
          body: { records },
        } = res;
        if (code == 0) {
          let records_lsit = records.map((item) => {
            if (item.effectiveType == 1) {
              item.expiredTime = item.expiredTime.substring(0, 10);
            }
            return item;
          });
          this.use_list = records_lsit || [];

          if (this.nav_code == 3) {
            let dd = records_lsit || [];
            this.use_list_redem = dd.filter((id) => !id.receive);
          }
        }
      });
    },
    async get_coupon() {
      const {
        code,
        body: { records },
      } = await my_coupon(this.query);
      if (code === "0") {
        switch (this.nav_code) {
          case 1:
            this.use_list = records || [];
            break;

          case 2:
            this.used_list = records || [];
            break;

          case 0:
            this.invalid_list = records || [];
            break;
        }
      }
    },
    redemption() {
      this.use_list_redem = [];
      if (!this.coupon.password) {
        return uni.showToast({
          title: "请输入口令",
          icon: "none",
        });
      }
      get_by_password({ id: this.coupon.password }).then((res) => {
        if (res.code == 0) {
          this.use_list_redem = res.body ? [res.body] : [];
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ty-nav-li {
  border-radius: 32rpx;
  &.bg-f8ff {
    border-radius: 32rpx 32rpx 0 0;
    .t-b {
      color: #000000;
    }
  }
}
.ty-use {
  border-radius: 0 80rpx 0 0;
}
.ty-used {
  border-radius: 80rpx 80rpx 0 0;
}
.ty-invalid {
  border-radius: 80rpx 0 0 0;
}

.scroll-view_H {
  position: absolute;
  top: 40rpx;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
}
</style>
